<template>
  <back-btn></back-btn>
  <div id="app">
    <h2>readonly: {{ readonlyData }}</h2>
    <h2>shallowReadonly: {{ shallowData }}</h2>

    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, readonly, shallowReadonly } from "vue";

export default defineComponent({
  setup() {
    const data = reactive({
      name: "",
      son: {
        name: "",
      },
    });

    const readonlyData = readonly(data);
    const shallowData = shallowReadonly(data);

    function update() {
      // readonlyData.name = "温情";  // 报错：无法分配到 "name" ，因为它是只读属性。
      // readonlyData.son.name = "key";  // 报错：无法分配到 "name" ，因为它是只读属性。

      // shallowData.name = "温情"; // 报错：无法分配到 "name" ，因为它是只读属性。
      shallowData.son.name = "key"; // √
    }

    return {
      readonlyData,
      shallowData,
      update,
    };
  },
});
</script>
